<template>
  <div>
      <div class="crumbs">
          <el-breadcrumb separator="/">
              <el-breadcrumb-item>
                  <i class="el-icon-lx-emoji"></i> 用户反馈
              </el-breadcrumb-item>
          </el-breadcrumb>
      </div>
      <div class="container">
          <div class="handle-box">
              <!-- <el-button
                  type="primary"
                  icon="el-icon-delete"
                  class="handle-del mr10"
                  @click="delAllSelection"
              >批量刪除</el-button> -->
              <!-- <el-select v-model="query.address" placeholder="地址" class="handle-select mr10">
                  <el-option key="1" label="广东省" value="广东省"></el-option>
                  <el-option key="2" label="湖南省" value="湖南省"></el-option>
              </el-select>
              <el-input v-model="query.name" placeholder="用户名" class="handle-input mr10"></el-input>
              <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button> -->
          </div>
          <el-table
            :data="tableData"
            border
            class="table"
            ref="multipleTable"
            header-cell-class-name="table-header"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55" align="center"></el-table-column>
            <el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
            <el-table-column prop="userId" label="用户openid"></el-table-column>
            <el-table-column prop="content" label="反馈内容"></el-table-column>
            <el-table-column prop="feedTime" label="反馈时间"></el-table-column>
            <el-table-column prop="reply" label="回复内容"></el-table-column>
            <el-table-column prop="replyTime" label="回复时间"></el-table-column>
            <el-table-column label="操作" width="180" align="center">
              <template slot-scope="scope">
                <el-button type="text" icon="el-icon-edit" @click="handleReply(scope.$index, scope.row)">回覆</el-button>
                <!-- <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
              <el-pagination
                  background
                  layout="total, prev, pager, next"
                  :current-page="query.pageIndex"
                  :page-size="query.pageSize"
                  :total="pageTotal"
                  @current-change="handlePageChange"
              ></el-pagination>
          </div>
      </div>

      <!-- 编辑弹出框 -->
      <el-dialog title="回覆" :visible.sync="editVisible" width="30%">
          <el-form ref="form" :model="form" label-width="70px">
              <el-form-item label="內容">
                  <el-input v-model="form.reply"></el-input>
              </el-form-item>
              <!-- <el-form-item label="地址">
                  <el-input v-model="form.address"></el-input>
              </el-form-item> -->
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button @click="editVisible = false">取 消</el-button>
              <el-button type="primary" @click="saveEdit">确 定</el-button>
          </span>
      </el-dialog>
  </div>
</template>

<script>
import { fetchData } from '../../api/index';
import axios from '../../axios/index';
export default {
  name: 'basetable',
  data() {
      return {
          query: {
              pageIndex: 1,
              pageSize: 10
          },
          tableData: [],
          multipleSelection: [],
          delList: [],
          editVisible: false,
          pageTotal: 0,
          form: {},
          idx: -1,
          id: -1
      };
  },
  created() {
      this.getData();
  },
  methods: {
      getData() {
        axios.get('/manager/feedback/get', {})
          .then(response => {
            const res = response;
              this.tableData = res.data.map(item => {
                return {
                  ...item,
                  feedTime: this.formatDate(item.feedTime),
                  replyTime: item.replyTime ? this.formatDate(item.replyTime) : ''
                };
              });
              this.pageTotal = res.data.length;
          })
          .catch(error => {
            console.error("获取数据失败: ", error);
          });
      },
      formatDate(dateString) {
        const date = new Date(dateString);
        const year = date.getFullYear();
        const month = date.getMonth() + 1;
        const day = date.getDate();
        const hour = date.getHours();
        const minute = date.getMinutes();
        const second = date.getSeconds();
        return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
      },

      // 触发搜索按钮
      // handleSearch() {
      //     this.$set(this.query, 'pageIndex', 1);
      //     this.getData();
      // },
      // 删除操作
      handleDelete(index, row) {
          // 二次确认删除
          this.$confirm('确定要删除吗？', '提示', {
              type: 'warning'
          })
              .then(() => {
                  this.$message.success('删除成功');
                  this.tableData.splice(index, 1);
              })
              .catch(() => {});
      },
      // 多选操作
      handleSelectionChange(val) {
          this.multipleSelection = val;
      },
      delAllSelection() {
          const length = this.multipleSelection.length;
          let str = '';
          this.delList = this.delList.concat(this.multipleSelection);
          for (let i = 0; i < length; i++) {
              str += this.multipleSelection[i].name + ' ';
          }
          this.$message.error(`删除了${str}`);
          this.multipleSelection = [];
      },
      // 编辑操作
      handleReply(index, row) {
          this.idx = index + 1;
          this.form = row;
          console.log(this.idx);
          this.editVisible = true;
      },
      // 保存编辑
      saveEdit() {
          this.editVisible = false;
          console.log(this.idx, this.form.reply);
          const params = {
            id:this.idx,
            reply: this.form.reply
          };
          axios.post('/manager/feedback/deal', params).then(response => {
            const res = response;
            if (res.code === '200') {
              console.log("success")
              this.$message.success(`回覆成功`);
            }
            console.log(res)
          })
          .catch(error => {
            console.error("获取数据失败: ", error);
          });
          // this.$set(this.tableData, this.idx, this.form);
      },
      // 分页导航
      handlePageChange(val) {
          this.$set(this.query, 'pageIndex', val);
          this.getData();
      }
  }
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
